<template>
  <div>
    <div class="home-content">
      <div class="container">
        <div class="top-box">
          <vue-seamless-scroll :data="listData" :class-option="classOption" class="warp">
            <ul class="ul-item">
              <li class="li-item" v-for="(item, index) in listData" :key="index">
                {{ item }}
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>

        <div class="bottom-box">
          <div class="left">
            <el-tabs v-model="activeName" type="card" style="margin-top: 2rem" @tab-click="handleClick">
              <el-tab-pane label="操作记录" name="first">
                <div class="btns">
                  <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="">
                      <el-cascader v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray" :props="{
                        checkStrictly: true,
                        value: 'id',
                        label: 'name',
                        children: 'childList',
                      }" @change="changeTreeItem" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="">
                      <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" clearable>
                        <el-option v-for="item in baseArray" :key="item.id" :label="item.name"
                          :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="czjl">
                  <div class="title" style="display: flex; justify-content: space-between">
                    <!-- <div style="display: flex; width: 10;">
                                            <div class="circle" style="margin-top: 0.8rem; margin-right: 0.5rem;"></div>
                                            <div style="font-size: 2rem;color: #000000;">操作记录</div>
                                        </div> -->
                    <div></div>
                    <div style="
                          font-size: 1rem;
                          margin-right: 1rem;
                          color: black;
                          font-family: '宋体';
                        ">
                      更多>
                    </div>
                  </div>
                  <div class="czjl-content">
                    <div class="czjl-title">
                      <el-row>
                        <el-col :span="3" style="
                              padding-left: 25px;
                              font-size: 2rem;
                              font-weight: bold;
                            ">鱼池编号</el-col>
                        <el-col :span="6" style="
                              text-align: center;
                              font-size: 2rem;
                              font-weight: bold;
                            ">设备</el-col>
                        <el-col :span="4" style="
                              text-align: center;
                              font-size: 2rem;
                              font-weight: bold;
                            ">执行动作</el-col>
                        <el-col :span="6" style="
                              text-align: center;
                              font-size: 2rem;
                              font-weight: bold;
                            ">操作人</el-col>
                        <el-col :span="5" style="
                              display: flex;
                              justify-content: flex-end;
                              padding-right: 10px;
                              font-size: 2rem;
                              font-weight: bold;
                            ">时间</el-col>
                      </el-row>
                    </div>
                    <div class="line"></div>
                    <div class="list">
                      <div class="item" v-for="(item, index) in recordArray" :key="index">
                        <el-row style="width: 100%; margin-bottom: 1.5rem">
                          <el-col :span="3" class="hover_title" :data-title="item.fishpondCode"
                            style="padding-left: 25px; font-size: 1.5rem">
                            {{
                              item.fishpondCode
                              ? item.fishpondCode.length > 7
                                ? item.fishpondCode.slice(0, 7) + '...'
                                : item.fishpondCode
                              : ' ——'
                            }}
                          </el-col>
                          <el-col class="hover_title" :data-title="item.deviceName" :span="6" style="
                                text-align: center;
                                padding-left: 10px;
                                font-size: 1.5rem;
                              ">
                            {{
                              item.deviceName
                              ? item.deviceName.length > 7
                                ? item.deviceName.slice(0, 8) + '...'
                                : item.deviceName
                              : ' ——'
                            }}
                          </el-col>
                          <el-col :span="4" style="text-align: center; font-size: 1.5rem">{{ item.value }}</el-col>
                          <el-col :span="6" style="text-align: center; font-size: 1.5rem">{{ item.useName }}</el-col>
                          <el-col :span="5" style="
                                display: flex;
                                justify-content: flex-end;
                                padding-right: 10px;
                                font-size: 1.5rem;
                              ">{{ item.createDate }}</el-col>
                        </el-row>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="报警记录" name="second">
                <div class="btns" style="margin-top: 1rem">
                  <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="">
                      <el-cascader v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray" :props="{
                        checkStrictly: true,
                        value: 'id',
                        label: 'name',
                        children: 'childList',
                      }" @change="changeTreeItem" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="">
                      <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" clearable>
                        <el-option v-for="item in baseArray" :key="item.id" :label="item.name"
                          :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="bjxx">
                  <div class="title" style="display: flex; justify-content: space-between">
                    <!-- <div style="display: flex; width: 10;">
                                            <div class="circle" style="margin-top: 0.8rem; margin-right: 0.5rem;"></div>
                                            <div>报警记录</div>
                                        </div> -->
                    <div></div>
                    <div style="
                          font-size: 1rem;
                          margin-right: 1rem;
                          color: black;
                          font-family: '宋体';
                        ">
                      更多>
                    </div>
                  </div>
                  <div class="bjxx-content">
                    <div class="bjxx-title">
                      <el-row style="width: 100%">
                        <el-col :span="5" style="
                              padding-left: 25px;
                              font-size: 1.2rem;
                              font-weight: bold;
                            ">鱼池编号</el-col>
                        <el-col :span="6" style="
                              text-align: center;
                              font-size: 1.2rem;
                              font-weight: bold;
                            ">告警类型</el-col>
                        <el-col :span="6" style="
                              text-align: center;
                              font-size: 1.2rem;
                              font-weight: bold;
                            ">数值</el-col>
                        <el-col :span="7" style="
                              display: flex;
                              justify-content: flex-end;
                              padding-right: 10px;
                              font-size: 1.2rem;
                              font-weight: bold;
                            ">时间</el-col>
                      </el-row>
                    </div>
                    <div class="line"></div>
                    <div class="list">
                      <div class="item" v-for="(item, index) in alarmArray" :key="index">
                        <el-row style="width: 100%">
                          <el-col :span="5" style="padding-left: 25px; font-size: 1.2rem">{{ item.fishpondCode }}</el-col>
                          <el-col :span="6" style="text-align: center; font-size: 1.2rem">{{ item.alarmType }}</el-col>
                          <el-col :span="6" style="text-align: center; font-size: 1.2rem">{{ item.value }}</el-col>
                          <el-col :span="7" style="
                                display: flex;
                                justify-content: flex-end;
                                padding-right: 10px;
                                font-size: 1.2rem;
                              ">{{ item.startTime }}</el-col>
                        </el-row>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getDataHisSwitchList,
  getDataHisAlarmList,
  getInWaterTailWaterObjBoxs,
  getObjBoxFishpondDeviceList,
} from '@/api/home'
import { getCompanyInfoTree } from '@/api/company'
import { getSysCompanyBases } from '@/api/system'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll,
  },
  // 表格数据
  data() {
    return {
      timer: '',
      activeName: 'first',
      // 报警字段
      listData: ['警', '报', '警', '警', '警'],
      classOption: {
        limitMoveNum: 2,
        direction: 3,
      },
      // 查询字段
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        userType: '',
        companyId: Number(window.localStorage.getItem('companyId')),
        baseId: '',
      },
      recordArray: [],
      alarmArray: [],
      boxArray: [],
      fishpondArray: [],
      companyArray: [],
      baseArray: [],
      recordCount: 1,
    }
  },
  // 初始化加载
  mounted() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
    this.getCompanyInfoTree()
  },
  created() {
    this.setInterval()
  },
  //销毁钩子
  beforeDestroy() {
    // // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      // const element = document.getElementById('content')
      // screenfull.exit(element)
    }
  },
  // 自定义方法
  methods: {
    // 30s一次页面刷新
    setInterval() {
      console.log(1)
      let that = this
      this.timer = window.setInterval(() => {
        setTimeout(() => {
          that.getDataHisSwitchList()
          that.getDataHisAlarmList()
        }, 0)
      }, 3000)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 跳转到控制箱
    getbox(item) {
      console.log(item)
      this.$router.push({
        path:
          `/device/sysBoxDetail?id=` +
          item.id +
          '&code=' +
          item.code +
          '&name=' +
          item.name,
      })
    },
    getDataHisSwitchList() {
      getDataHisSwitchList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.recordArray = res.data.data
          console.log(res.data.data)
        }
      })
    },
    getDataHisAlarmList() {
      getDataHisAlarmList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.alarmArray = res.data
        }
      })
    },
    getInWaterTailWaterObjBoxs() {
      getInWaterTailWaterObjBoxs(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.boxArray = res.data
        }
      })
    },
    getObjBoxFishpondDeviceList() {
      getObjBoxFishpondDeviceList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.fishpondArray = res.data.data
        }
      })
    },
    getCompanyInfoTree() {
      if (this.searchForm.userType == 0) {
        // 超级管理员，公司只有一个总公司
        getCompanyInfoTree().then((res) => {
          if (res.code == 200) {
            this.companyArray = res.data
          }
        })
      } else {
        getCompanyInfoTree({ id: 0 }).then((res) => {
          if (res.code == 200) {
            this.companyArray = res.data
          }
        })
      }
    },
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1]
      } else {
        this.searchForm.companyId = ''
      }

      this.searchForm.baseId = ''
      this.baseArray = []

      // 获取基地列表
      this.getSysCompanyBases()
    },
    getSysCompanyBases() {
      if (
        this.searchForm.companyId === '' ||
        this.searchForm.companyId == null
      ) {
        return
      }

      getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
        if (res.code == 200) {
          this.baseArray = res.data
          if (res.data.length > 0) {
            this.searchForm.baseId = res.data[0].id
            this.getDataHisSwitchList()
            this.getDataHisAlarmList()
            this.getInWaterTailWaterObjBoxs()
            this.getObjBoxFishpondDeviceList()
          }
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.el-tabs__item {
  width: 13rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  font-size: 2rem;
  background-color: #fff;
}

/deep/ .el-tabs__item.is-active {
  border: 2px solid white;
  background-color: #409eff;
  color: white;
}

/*滚动条整体样式*/
::-webkit-scrollbar {
  display: none;
  // width: 4px;
  // height: 10px;
}

/*滚动条里面小方块*/
// ::-webkit-scrollbar-thumb {
//   border-radius: 10px;
//   background: #48a0f8;
// }

// /*滚动条里面轨道*/
// ::-webkit-scrollbar-track {
//   border-radius: 10px;
//   background: #ededed;
// }

// 鼠标移入清除省略号
.hover_title[data-title] {
  position: relative;

  // 样式：
  &:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
  }

  // 背景的样式 位置 字体等
  &:after {
    content: attr(data-title);
    position: absolute;
    padding: 1px 10px;
    left: 50px;
    bottom: -1.8em;
    // right: 0.5rem;
    border-radius: 4px;
    color: #fff;
    background-color: rgba(80, 79, 79, 0.8);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
    font-size: 14px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
  }
}

.home-content {
  // min-height: calc(100vh - 90px);
  width: 100%;
  background: #ffffff;

  .container {
    .top-box {
      display: flex;
      width: 100%;
      height: 7rem;
      padding-left: 1.39rem;
      padding-top: 1.21rem;
      border-bottom: 5px solid #373b44;
      align-items: center;

      .btns {
        display: flex;

        .btn {
          width: 7.07rem;
          height: 8rem;
          background-color: #e3e3e5;
          text-align: center;
          line-height: 8rem;
          margin-right: 0.85rem;
          border-radius: 0.14rem;
          font-size: 1.29rem;
          // color: #333333;
          cursor: pointer;
        }
      }
    }

    .bottom-box {
      // height: 53.57rem;
      width: 100%;
      // display: grid;
      // grid-template-columns: 1fr 1fr;

      .title {
        display: flex;
        // margin-top: 1.21rem;
        margin-bottom: 0.57rem;
        align-items: center;
        font-size: 1.43rem;
        font-weight: bold;
        color: #ffffff;

        .circle {
          width: 5px;
          height: 5px;
          background: #2ce11a;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
    }

    .left {
      width: 100%;
      min-height: 53.1rem;
      padding-left: 1.39rem;
      // border-right: 5px solid #373B44;

      .czjl-content {
        width: 100%;
        min-height: 47rem;
        padding: 20px 0px;
        border-radius: 0.43rem;
        border: 0.07rem solid rgba(124, 124, 124, 0.12);
        background-color: #f2f2f2;
        display: flex;
        flex-direction: column;
        align-items: center;

        .czjl-title {
          .el-row {
            width: 100%;
          }

          width: 96%;
          display: flex;
          // justify-content: space-around;
        }

        .line {
          height: 2px;
          width: 96%;
          margin-top: 1rem;
          margin-bottom: 1rem;
          background-color: black;
        }

        .list {
          width: 96%;

          .item {
            width: 100%;
            display: flex;
            justify-content: space-around;
          }
        }
      }

      .bjxx {
        .bjxx-content {
          width: 100%;
          height: 47rem;
          padding: 20px 0px;
          margin-bottom: 20px;
          border-radius: 0.43rem;
          border: 0.07rem solid rgba(124, 124, 124, 0.12);
          background-color: #f2f2f2;
          display: flex;
          flex-direction: column;
          align-items: center;

          .bjxx-title {
            width: 96%;
            display: flex;
            justify-content: space-around;
          }

          .line {
            height: 2px;
            width: 96%;
            margin-top: 1rem;
            margin-bottom: 1rem;
            background-color: black;
          }

          .list {
            width: 96%;
            height: 90%;
            overflow: hidden;

            .item {
              width: 100%;
              display: flex;
              justify-content: space-around;
              margin-bottom: 0.86rem;
            }
          }
        }
      }
    }
  }
}

.warp {
  width: 100rem !important;
  height: 70px;
  margin: 0 auto;
  overflow: hidden;
  // margin-left: 24rem;
  margin-left: 3rem;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 43rem;

    &.ul-item {
      display: flex;

      .li-item {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        line-height: 60px;
        // background-color: #999;
        color: red;
        text-align: center;
        font-size: 40px;
      }
    }
  }
}
</style>
